<template>
  <div class="phone">
    <i class="el-icon-s-unfold" @click="drawer = !drawer" ></i>
    <el-drawer
      class="sidebar"
      :withHeader="false"
      direction="ltr"
      :visible.sync="drawer"
      :show-close="false"
      size="50%"
      :modal="false">
      <el-menu
        class="el-menu-demo"
      >
        <template v-for="item in navList">
          <el-submenu v-if="item.childrens && item.childrens.length" :index="item.name" :key="item.id">
            <template slot="title">
              {{ item.name }}
            </template>
            <el-menu-item
              v-for="(childrens, id) in item.childrens"
              :key="id"
              :index="childrens.url"
              @click="clickMenu(childrens)"
            >
              {{ childrens.name }}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="item.url" :key="item.id + 1" @click="clickMenu(item)" >
          {{ item.name }}
          </el-menu-item>
        </template>
      </el-menu>
    </el-drawer>
  </div>
</template>

<script>
import pcMenu from '@/components/PcNav/index.vue'
export default {
  props: {
    navList: Array
  },
  data () {
    return {
      drawer: false
    }
  },
  components:{
    pcMenu
  },
  methods:{
    clickMenu(menu) {
      // this.$store.commit('SET_MENU', menu);
      this.$router.push({
          path: menu.url
      });
    }
  }
}
</script>

<style scoped>
  .phone {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  i {
    font-size: 30px;
    color: white;
  }
  .sidebar {
    font-size: 15px;
    position: fixed;
    z-index: 10;
    margin: 0;
    top: 60px;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    border-right: 1px solid #eaecef;
    overflow-y: auto;
  }
</style>